import { jdoo } from "./jdoo.js";
import htm from "./libs/htm.js";
import { h, render } from "./libs/fre.js";
const html = htm.bind(h);

jdoo.define("jdoo.Component", {
    render() {
        return html``;
    },
    useState(data) {
        let me = this;
        Object.keys(data).forEach(key => {
            let internalValue = data[key];
            Object.defineProperty(data, key, {
                get() {
                    return internalValue
                },
                set(newVal) {
                    internalValue = newVal;
                    console.log(newVal);
                    me.update();
                },
            })
        })
        return data;
    },
    mount() {
        this.update = render(html`<${this.render.bind(this)} />`, this.dom || document.body);
    },
});

jdoo.component = function (name, define) {
    if (typeof define === 'function') {
		define = define();
	}
	define.extends = define.extends || 'jdoo.Component';
	define.xtype = define.xtype || name;
	return jdoo.define(name, define);
}